<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import slUniCalendar from "./components/sl-uni-calendar/sl-uni-calendar";
import useUserStore from "@/pinia/modules/userStore";
const userStore = useUserStore();
const { taskReportInfo } = storeToRefs(userStore);
const change = async ({ year, month }) => {
  await userStore.fetchTaskReportInfo({ year, month: String(month) });
};
onLoad(()=>{
  userStore.fetchTaskReportInfo({ year: new Date().getFullYear(), month: new Date().getMonth() + 1 });
})
</script>

<template>
  <view class="page-container">
    <sl-uni-calendar :show-month="false" @change="change">
      <view class="data-overview">
        <view class="item">
          <text class="volumn">{{taskReportInfo.taskAmounts}}</text>
          <text class="label">任务总量</text>
        </view>
        <view class="item">
          <text class="volumn">{{taskReportInfo.completedAmounts}}</text>
          <text class="label">完成任务量</text>
        </view>
        <view class="item">
          <text class="volumn">{{taskReportInfo.transportMileage}}</text>
          <text class="label">运输里程(km)</text>
        </view>
      </view>
    </sl-uni-calendar>
  </view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
